<template>
  <div>
    <div v-if="isTitle"
      class="title">
      <span>{{ title }}</span>
    </div>
    <el-card class="card"
      shadow="never"
      :style="{ 'border-width': isCardBorder ? '1px' : '0px' }">
      <div class="detail-div">
        <div v-for="(detail, index) in list"
          :key="index"
          class="detail-row">
          <div v-for="(item, i) in detail"
            :key="i"
            style="display: contents">
            <div class="detail-label">
              {{ item.text }}<span v-if="item.text">：</span>
            </div>
            <div class="detail-value"
              :style="{
                'border-right-width': detail.length == 1 ? '0px' : '1px',
              }">
              <template v-if="item.slotName">
                <slot :name="item.slotName"
                  :item="item" />
              </template>
              <template v-else>
                {{ item.value }}
              </template>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'TDetail',
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
    isTitle: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    isCardBorder: {
      type: Boolean,
      default: false,
    },
  },
}
</script>
<style scoped>
.title {
  color: #383838;
  font-size: 16px;
  border-bottom: 1px solid #dedede;
  padding: 3px 5px;
  border-radius: 5px;
  margin-top: 3px;
}

.card {
  border-radius: 6px;
  padding: 5px;
  margin-bottom: 12px;
  margin-top: 8px;
}

.detail-div {
  border: 1px solid #d5dbe0;
  border-right: 0px solid #d5dbe0;
  border-bottom: 0px solid #d5dbe0;
}

.detail-row {
  border-bottom: 1px solid #d5dbe0;
  display: flex;
}

.detail-label {
  width: 30%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
  text-align: right;
  color: #525e8c;
  background: #f9fcfd;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.detail-value {
  width: 80%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
  display: flex;
  align-items: center;
}
</style>
